import { StyleSheet, Text, View, Image } from 'react-native'
import React, { useState } from 'react'

export default function Systemnotification() {
  const [data, setData] = useState([
    {
      id: 1,
      img: "../../assets/images/shengyin.png",
      title: "系统通知",
      content: "系统设计公告，最新版本6.1",
      time: "2022-13-01    10:00"
    },
    {
      id: 2,
      img: "../../assets/images/shengyin.png",
      title: "系统通知",
      content: "系统设计公告，最新版本6.1",
      time: "2022-12-01    10:00"
    },
    {
      id: 2,
      img: "../../assets/images/shengyin.png",
      title: "系统通知",
      content: "系统设计公告，最新版本6.1",
      time: "2022-11-01    10:00"
    },
  ])


  return (
    <View>
      {
        data.map((item) => (
          <View key={item.id} style={styles.fryns}>
            <View>
              <Image
                source={require("../../assets/images/shengyin.png")}
                style={styles.img}
              />
            </View>
            <View style={styles.btgt}>
              <Text style={{ marginBottom: 15, fontSize: 12 }}>{item.title}
                <Text style={styles.btsdf}>                          {item.time}</Text></Text>
              <Text style={{ marginTop: 15, fontSize: 12, color: "#999999" }}>{item.content}</Text>
              <Text style={{ marginBottom: 15, fontSize: 12}}>{item.title}
                <Text style={styles.btsdf}>                          {item.time}</Text></Text>
              <Text style={{ marginTop: 15, fontSize: 12, color: "#999999"}}>{item.content}</Text>
            </View>

          </View>
        ))
      }

    </View>
  )
}

const styles = StyleSheet.create({
  fryns: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    padding: 10,
    borderBottomWidth: 1,
    borderBottomColor: "#ccc",
    fontSize: 12,
    height: 100
  },
  img: {
    width: 30,
    height: 30,
    margin: 20,
  },
  btgt: {
    width: 300,
    // height: 50,
    // backgroundColor: "red",
    margin: 20,
  },
  btsdf: {
    fontSize: 12,
    color: "#999999",
  }
})